<template>
	<view class="fitnessInfo">
		<view class="booking-history">
			<view class="booking-title">
				<text class="booking-title1">
					今日课程
				</text>
				<text class="booking-title2" @click="manageCourses">
					管理课程
				</text>
			</view>
			<!-- 使用v-for循环渲染今日课程 -->
			<view class="course-item" v-for="(item, index) in todayCourses" :key="item.id">
				<view class="course-item-top">
					<view class="course-title">
						{{item.name}}
					</view>
					<view class="course-time">
						{{formatTime(item.startTime)}}-{{formatTime(item.endTime)}}
					</view>
					<!-- 改为使用内联样式 -->
					<text class="course-status" :style="'background-color:' + getCourseStatusColor(item.status)">
						{{getCourseStatusText(item.status)}}
					</text>
				</view>
				<view class="course-item-bottom">
					学员：{{item.quantity || 0}}/{{item.maxCapacity}}人 | 地点：{{item.address}}
				</view>
			</view>
			<!-- 无数据提示 -->
			<view class="empty-data" v-if="!todayCourses.length">
				今日暂无课程安排
			</view>
			<view class="cta-button" @click="gomoreapp">
				前往管理今日课程
			</view>
		</view>

		<view class="booking-history">
			<view class="booking-title">
				<text class="booking-title1">
					需要填写的训练报告
				</text>
				<text class="booking-title2" @click="gomoreapp">
					查看全部
				</text>
			</view>
			<!-- 使用v-for循环渲染待填写的训练报告 -->
			<view class="course-item" v-for="(item, index) in pendingReports" :key="item.id">
				<view class="course-item-top">
					<view class="course-title">
						{{item.categoriesName || '团课'}} - {{item.name}}
					</view>
					<view class="course-time">
						{{formatDate(item.startTime)}} {{formatTime(item.startTime)}}-{{formatTime(item.endTime)}}
					</view>
					<text class="course-status">
						已完成
					</text>
				</view>
				<view class="course-item-bottom">
					课程内容：{{item.remark }} | 课程状态：已结束
				</view>
			</view>
			<!-- 无数据提示 -->
			<view class="empty-data" v-if="!pendingReports.length">
				暂无需要填写的训练报告
			</view>
			<view class="cta-button" @click="gomoreapp" v-if="pendingReports.length">
				填写训练报告
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth.js';

	export default {
		data() {
			return {
				pendingReports: [], // 存储需要填写的训练报告
				todayCourses: [] // 存储今日课程
			}
		},
		onLoad() {
			this.getPendingReports();
			this.getTodayCourses();
		},
		methods: {
			// 获取卡类型文本
			getCardTypeText(cardType) {
				const cardTypeMap = {
					'venue': '场地卡',
					'monthly': '月卡',
					'exclusive': '专属卡',
					'personal': '私教卡',
					'team': '团操卡'
				};

				return cardTypeMap[cardType] || '通用卡';
			},



			// 获取课程状态文本
			getCourseStatusText(status) {
				const statusMap = {
					'1': '待上课',
					'2': '上课中',
					'3': '已结束'
				};

				return statusMap[status] || '待上课';
			},

			// 获取课程状态颜色
			getCourseStatusColor(status) {
				const colorMap = {
					'1': '#2196F3', // 蓝色 - 待上课
					'2': '#4CAF50', // 绿色 - 进行中
					'3': '#9E9E9E' // 灰色 - 已结束
				};

				return colorMap[status] || '#2196F3';
			},

			// 获取今日课程
			getTodayCourses() {
				const data = {
					openid: getToken()
				};

				this.request('gym/courseCategories/list', data, 'GET').then(res => {
					console.log("今日课程:", res);

					if (res && res.code === 200 && res.data) {
						// 将API返回的数据保存到todayCourses
						this.todayCourses = res.data;

						// 按照开始时间排序
						this.todayCourses.sort((a, b) => {
							return new Date(a.startTime) - new Date(b.startTime);
						});
					} else {
						console.log('获取今日课程失败:', res?.msg);
						this.todayCourses = [];
					}
				}).catch(err => {
					console.error('请求发生错误:', err);
					this.todayCourses = [];
				});
			},

			// 获取需要填写的训练报告
			getPendingReports() {
				const data = {
					openid: getToken()
				};

				uni.showLoading({
					title: '加载中...'
				});

				this.request('gym/TrainingReports/list', data, 'GET').then(res => {
					uni.hideLoading();
					console.log("需要填写的训练报告:", res);
					this.pendingReports = res.data;

				})
			},

			// 格式化日期为 YYYY-MM-DD 格式
			formatDate(dateTimeStr) {
				if (!dateTimeStr) return '';

				const date = new Date(dateTimeStr);
				const today = new Date();
				const yesterday = new Date(today);
				yesterday.setDate(today.getDate() - 1);

				// 判断是否为今天或昨天
				if (date.toDateString() === today.toDateString()) {
					return '今日';
				} else if (date.toDateString() === yesterday.toDateString()) {
					return '昨日';
				} else {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${month}-${day}`;
				}
			},

			// 格式化时间为 HH:MM 格式
			formatTime(dateTimeStr) {
				if (!dateTimeStr) return '';

				const date = new Date(dateTimeStr);
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');

				return `${hours}:${minutes}`;
			},

			// 前往管理今日课程
			gomoreapp() {
				uni.navigateTo({
					url: '/pages/projectlist/projectlist'
				});
			},



			// 管理课程
			manageCourses() {
				uni.navigateTo({
					url: '/pages/courseManagement/courseManagement'
				});
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/mixins.scss';

	// @include rounded-box(32upx);
	// @include box-sizing-padding(24upx);
	// @include flex-center(center, space-between, column);
	.cta-button {
		width: 340rpx;
		height: 100rpx;
		@include rounded-box(10rpx, #FFD700);
		color: #000000;
		@include flex-center();
		margin-top: 30rpx;
		color: #000;
		font-size: 34rpx;
		font-weight: bold;
	}

	.empty-data {
		width: 100%;
		padding: 40rpx 0;
		text-align: center;
		color: #999;
		font-size: 30rpx;
	}

	.fitnessInfo {
		width: 100%;
		@include flex-center(center, space-between, column);
	}

	.booking-history {
		width: 640rpx;
		min-height: 300rpx;
		@include rounded-box(20rpx, #1f1f1f);
		@include box-sizing-padding(40rpx, 24rpx);
		@include flex-center(center, space-between, column);
		margin: 30rpx 0;

		.booking-title {
			width: 100%;
			color: #FFD700;
			border-bottom: 2rpx solid #FFD700;
			@include flex-center(center, space-between);
			padding: 20rpx 0;

			.booking-title1 {
				font-size: 36rpx;
				font-weight: bold;
			}

			.booking-title2 {
				font-size: 30rpx;
			}
		}


		.course-item {
			width: 100%;
			border-bottom: 1px solid #444;
			padding: 40rpx 0;
			color: #e0e0e0;
			@include flex-center(center, center, column);

			.course-item-top {
				width: 100%;
				flex: 1;
				margin-bottom: 20rpx;
				@include flex-center(center, left);

				.course-title {
					font-size: 30rpx;
				}

				.course-time {
					color: #aaa;
					font-size: 28rpx;
					margin: 0 10rpx;
				}

				.course-status {
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					font-weight: bold;
					background-color: #9E9E9E;
					color: #fff;
				}
			}



			.course-item-bottom {
				width: 100%;
				flex: 1;
				font-size: 30rpx;
				line-height: 1.5;
			}
		}
	}
</style>